<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - AI 画廊</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-miniprogram@1.2.2/dist/style/index.wxss">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            overflow-y: auto;
        }
        /* TDesign 风格模拟 */
        .t-header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 500;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid #eee;
        }
        .t-bottom-bar {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #eee;
            z-index: 10;
        }
        .t-tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #888;
        }
        .t-tab-item.active {
            color: #0052d9;
        }
        .t-tab-icon {
            font-size: 24px;
            margin-bottom: 2px;
        }
        .t-tab-text {
            font-size: 12px;
        }
        .t-user-card {
            background-color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .t-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #eee;
            margin-right: 16px;
            background-size: cover;
            background-position: center;
        }
        .t-username {
            font-size: 18px;
            font-weight: 500;
        }
        .t-section-title {
            font-size: 16px;
            font-weight: 500;
            margin: 16px;
            color: #333;
        }
        .t-login-button {
            display: block;
            width: 80%;
            height: 44px;
            margin: 100px auto;
            background-color: #07c160; /* 微信绿色 */
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .t-login-button svg {
            margin-right: 8px;
        }
        .t-grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 4px;
            padding-bottom: 70px;
        }
        .t-grid-item {
            width: 50%;
            padding: 4px;
            box-sizing: border-box;
        }
        .t-card {
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .t-card-image {
            width: 100%;
            height: 180px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .t-card-content {
            padding: 8px 12px;
        }
        .t-card-title {
            font-size: 14px;
            line-height: 1.4;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .status-bar {
            height: 44px;
            background-color: #fff;
        }
        
        /* 登录后状态 */
        .logged-in {
            display: none; /* 默认隐藏，通过JS切换 */
        }
        
        /* 未登录状态 */
        .not-logged-in {
            display: block; /* 默认显示，通过JS切换 */
        }
        
        /* 在演示原型中添加切换按钮 */
        .toggle-login-status {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 100;
            background-color: rgba(0,0,0,0.1);
            color: #333;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="status-bar"></div>
    <div class="t-header">我的</div>
    
    <!-- 切换登录状态按钮（仅供原型演示） -->
    <button class="toggle-login-status" onclick="toggleLoginStatus()">切换登录状态</button>
    
    <!-- 未登录状态 -->
    <div class="not-logged-in">
        <div class="t-login-button">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z" fill="white"/>
            </svg>
            微信一键登录
        </div>
    </div>
    
    <!-- 登录后状态 -->
    <div class="logged-in">
        <div class="t-user-card">
            <div class="t-avatar" style="background-image: url('https://picsum.photos/100/100?random=99');"></div>
            <div class="t-username">微信用户</div>
        </div>
        
        <div class="t-section-title">个人画廊</div>
        
        <div class="t-grid">
            <!-- 个人作品 -->
            <div class="t-grid-item">
                <div class="t-card">
                    <div class="t-card-image" style="background-image: url('https://picsum.photos/300/300?random=10');"></div>
                    <div class="t-card-content">
                        <div class="t-card-title">山间湖泊，秋叶飘落，写实风格</div>
                    </div>
                </div>
            </div>
            <div class="t-grid-item">
                <div class="t-card">
                    <div class="t-card-image" style="background-image: url('https://picsum.photos/300/300?random=11');"></div>
                    <div class="t-card-content">
                        <div class="t-card-title">夜晚的城市街道，雨后的霓虹灯倒映在水洼中</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="t-bottom-bar">
        <div class="t-tab-item">
            <div class="t-tab-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z" fill="currentColor"/>
                </svg>
            </div>
            <div class="t-tab-text">首页</div>
        </div>
        <div class="t-tab-item active">
            <div class="t-tab-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="currentColor"/>
                </svg>
            </div>
            <div class="t-tab-text">我的</div>
        </div>
    </div>

    <script>
        // 切换登录状态的函数（仅供原型演示）
        function toggleLoginStatus() {
            const loggedIn = document.querySelector('.logged-in');
            const notLoggedIn = document.querySelector('.not-logged-in');
            
            if (loggedIn.style.display === 'block') {
                loggedIn.style.display = 'none';
                notLoggedIn.style.display = 'block';
            } else {
                loggedIn.style.display = 'block';
                notLoggedIn.style.display = 'none';
            }
        }
    </script>
</body>
</html> 